<template>
    <div class="case-progress" id="progress">
        <div class="overflow-box 11" :style="`transform:translateY(-50%);`">

            <div class="progress-item" :style="`height:${width + 24}px`">
                <template v-for="(t, index) in list">
                    <div class="progress-box" :key="index" v-if="index < 3"
                        :style="`width:${width}px;height:${width + 24}px`">
                        <!-- <progress-bar type="circle" :color="'rgba(45, 153, 255, 1)'" :percentage="t.ratio * 100" :show-text="false"
                :width="width" /> -->
                        <img src="./img/fucking.png" :width="width + 'px'" alt="">
                        <div class="ratio" :style="`top:${width/2.6}px`">{{ (t.ratio * 100).toFixed(1) }}%</div>
                        <div class="divisionName">{{ t.divisionName }}</div>
                    </div>
                </template>

            </div>
            <div class="progress-item">
                <template v-for="(t, index) in list">
                    <div class="progress-box" :key="index" v-if="index >= 3"
                        :style="`width:${width}px;height:${width + 24}px`">
                        <!-- <progress-bar type="circle" :color="'rgba(45, 153, 255, 1)'" :percentage="t.ratio * 100" :show-text="false"
                :width="width" /> -->
                        <img src="./img/fucking.png" :width="width + 'px'" alt="">
                        <div class="ratio" :style="`top:${width/2.6}px`">{{ (t.ratio * 100).toFixed(1) }}%</div>
                        <div class="divisionName">{{ t.divisionName }}</div>
                    </div>
                </template>

            </div>

        </div>
    </div>
</template>
  
<script>
import progressBar from './progressBar.vue';

export default {
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
    components: {
        progressBar,
    },
    watch: {
        list: {
            handler: function (newVal) {
                const uiList = [];
                for (let i = 0; i < newVal.length - 1; i += 2) {
                    uiList.push(newVal.slice(i, i + 2));
                }
                this.uiList = uiList;
            },
            deep: true,
        },
    },
    data() {
        return {
            uiList: [],
            width: document.body.clientWidth > 1366 ? 90 : 80,
            boxScale: 1,
            width: 0,
        };
    },
    mounted() {
        this.$nextTick(() => {
            const progressBoxWidth = document.querySelector('.overflow-box').offsetWidth;
            this.width = progressBoxWidth * 0.9 / 7;

        });
    },
    methods: {
        format(percentage, item) {
            return `${percentage}% \n ${item.divisionName}`;
        },
    },
};
</script>
  
<style lang="scss">
.case-progress {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .overflow-box {
        overflow-x: auto;
        position: relative;
        padding: 0 40px;
        top: 50%;
        transform: translateY(-50%);

        &::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, and Opera */
        }
    }

    .progress-item {
        width: 100%;
        display: inline-flex;
        user-select: none;
        justify-content: space-between;

        &:last-child {
            padding-left: 15%;
            margin-top: -10px;
        }

        &:first-child {
            padding-right: 15%;
            margin-bottom: -10px;
        }

        .progress-box {
            margin-bottom: 4px;
            position: relative;
            justify-content: center;
            align-items: center;
            color: #fff;
            img{
                position: absolute;
                top: 0;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .textCenter {
        position: absolute;
        text-align: center;

        div {
            font-size: 20px;
            line-height: 20px;
            color: #fff;
            font-weight: 500;
            margin-bottom: 2px;

            // 媒体查询
            @media screen and (max-width: 1366px) {
                font-size: 16px;
            }

        }

        span {
            font-size: 14px;
            color: #fff;

            // 媒体查询
            @media screen and (max-width: 1366px) {
                font-size: 12px;
            }
        }
    }

    .ratio {
        position: absolute;
        
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
    }

    .divisionName {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        bottom: 0;
        font-size: 14px;
    }

    .el-progress path:first-child {
        // 修改进度条背景色
        stroke: #091f33;
    }

    /* .el-progress--circle {
      width: 90px;
      height: 90px;
      .el-progress-circle {
        width: 90px !important;
        height: 90px !important;
      }
    } */
    .el-progress__text {
        // 修改进度条文字提示颜色
        color: #fff;
    }
}</style>
  